<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="//at.alicdn.com/t/font_388406_7mrmxzvj69psc3di.css">
<link rel="stylesheet" type="text/css" href="../css/common.css">
</head>
<body>

	<#import "/page.ftl" as page /> 
	<link rel="stylesheet" type="text/css" href="../css/public.css">
	<link rel="stylesheet" type="text/css" href="../css/address.css">
	<script type="text/javascript" src="/js/address.js"></script>
	<!-- body大盒子div开始 -->
	<script>
	$(function(){
	 if(${(statusid)!''}){
			var obj=$(".address-menu");
			obj.each(function(){
				if($(this).attr("status")==${(statusid)!''}){
					$(this).addClass("border-left");	
				}
			})
		}
	if(${(typeid)!''}){
		var obj=$(".address-type");
		obj.each(function(){
			if($(this).attr("dirid")==${(typeid)!''}){
				$(this).addClass("border-right");	
			}
		})
	}
	})
</script>
	<div class="body">
		<!-- content-header顶部div 开始 -->
		<#include "/head.ftl"/>
		<!-- 中部content div开始 -->
		<div class="garbager-option"
		style="background: white; display: none; position: absolute; z-index: 100;">
		<ul>
			<li class="addressdir-rename">重命名</li>
			<li class="addressdir-delete">删除</li>
		</ul>
	</div>
		<div class="content">
			<!-- 中部content内容 div开始 -->
			<div class="row">
				<div class="row-left">
					<a href="/address/addAddress" title="新建联系人"
						class="btn btn-upload bgColor-green2 margin-bottom button"
						style="margin: 0 0 20px 0"> <i
						class="iconfont icon-brush_fill" style="color: white;"></i> 新建联系人
					</a>
					<div class="box box-solid">
						<div class="box-header with-border">
							<h3 class="box-title">文件夹</h3>
							<div class="box-tools">
								<button class="btn btn-box-tool jian" onclick="jian()">
									<i class="iconfont icon-jian" id="one"></i>
								</button>
							</div>
						</div>
						<div class="box-body no-padding yunpan" style="display: block;max-height: 183px;overflow-y: auto;">
							<ul class="nav nav-pills nav-stacked type-ul">
								<li><a class="recently"> 
									<i class="iconfont icon-time-back"></i> 
									<span>最近</span>
								</a></li>
								<#list dirlist as dir>
									<li>
									<a class="address-type" dirid="${dir.id}"> 
											<i class="iconfont icon-circle1"></i> 
											<span class="dirname">${dir.name}</span>
											<input class="dirname-input" autofocus="autofocus" type="text" style="width:90%;border-radius: 3px;border:1px solid rgba(188, 162, 157, 0.3);display:none"/>
											<span style="float: right;display:none;color:#a29d9d" class='dir-btn-delete' dirid="${dir.id}" ><i class='iconfont icon-trash'></i></span>
										</a>
									</li>
								</#list>
							</ul>
						</div>				
					</div>
					<div class="box box-solid">
						<div class="box-header with-border">
							<h3 class="box-title">分类</h3>
						</div>
						<div class="box-body no-padding" style="display: block;">
							<div style="padding:10px">
								<div class="tab-tool" style="float:none">
									<input class=" new-type-input" style="width: 86%" type="text" placeholder="类型名称...">
									<div style="display: inline-block;"><a class="new-type uniquebackground" style=" margin-left: -5px;"> 
										<i class="iconfont icon-jia" style="font-size:14px;color: white;"></i>
										</a>
									</div>
								</div>
							</div>
						</div>
						
					</div>
					<div class="box box-solid">
						<div class="box-header with-border">
							<h3 class="box-title">类型</h3>
							<div class="box-tools">
								<button class="btn btn-box-tool" onclick="jian2()">
									<i class=" iconfont icon-jian " id="two"></i>
								</button>
							</div>
						</div>
						<div class="box-body no-padding leixing" style="display: block;">
							<ul class="nav nav-pills nav-stacked address-status">
								<#list status['address'] as addre>
									<li class="address-menu" status="${addre.value}">
									<a> <i class="iconfont icon-circle1 "></i>${addre.name}
									</a></li>
								</#list>			
							</ul>
						</div>
					</div>
				</div>
				<!-- 右部div盒子开始 -->
				<div class="row-right">
					<div class="box tab">	
						<div class="tab-header">
							<div class="mailbox-controls">
								<a title="全选/反选" class="btn btn-setting checkbox-togger"
									style="margin-right: 10px;"> <i
									class="iconfont icon-weibiaoti--"></i>
								</a> <a
									class="btn btn-setting btn-delete-many " path="${href!''}" > <i
									class="iconfont icon-trash"></i>
								</a>  <a title="刷新" class="btn btn-setting"
									style="margin-left: 10px;" onclick="refresh(this)"> <i
									class="iconfont icon-refresh"></i>
								</a>
								<div class="tab-tool">
									<input class="search-input" type="text" placeholder="查找...">
									<a class="search-btn"> <i
										class="iconfont icon-search"></i>
									</a>
								</div>
							</div>
							<div class="tab-content email-table address-table">
							
								<#if userlist??>
									<table class="table table-hover table-striped" cellspacing="0"
									border="0"
									style="border-width: 0px; border-collapse: collapse;">
									<thead>
										<tr>
											<th scope="col">选择</th>
											<th scope="col"></th>
											<th scope="col">联系人</th>
											<th scope="col">性别</th>
											<th scope="col">手机号码</th>
											<th scope="col">部门</th>
											<th scope="col">职位</th>
											<th scope="col">操作</th>
										</tr>
									</thead>
									<tbody>
									<#list (userlist.content) as user>
										<tr>
											<td>
												<div onclick="select(this)" dataid="${user.id}"
													class="icheckbox icheckbox_flat-green" aria-checked=false
													style="position: relative;">
													<input type="checkbox"
														style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
													<ins class="iCheck-helper"
														style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>
												</div>
											</td>
											<td>
											<span><div style="width:36px;height:36px;overflow: hidden;border-radius: 50%;">
											<#if user.photo??>
												<img src="/file/image/${user.photo}"  style="width:36px;height:36px"/>
											<#else>	
												<img src="../images/default-head.jpg" style="width:36px;height:36px"/>
											</#if>
											</div></span>
											</td>
											<td><span>${user.realName}</span></td>
											<td><a href="javascript:void(0)"><span>
											<#if user.sex="1">
												<i class="iconfont icon-boy" style="color: #00c0ef;"></i>
												<#else>
												<i class="iconfont icon-girl" style="color: #e14040;"></i>
											</#if>
											</span>
											</a></td>
											<td>
												<div style="text-overflow: ellipsis; white-space: nowrap; width: 100px; overflow: hidden; margin: 0 auto;">
													${user.tel}</div>
											</td>
											<td>
											<span>${user.dept.name}</span>
											</td>
											<td>
											<span>${user.deptOffice.name}</span>
											</td>
											<td><a class="btn btn-look " addressid="${user.id}"><i class="iconfont icon-search"></i><span>
														查看</span></a></td>
										</tr>
										</#list>
									</tbody>
								</table>
								<@page.page url=requestURI pager=userlist />
									<#elseif addresslist??>
									<table class="table table-hover table-striped" cellspacing="0"
									border="0"
									style="border-width: 0px; border-collapse: collapse;">
									<thead>
										<tr>
											<th scope="col">选择</th>
											<th scope="col"></th>
											<th scope="col">联系人</th>
											<th scope="col">性别</th>
											<th scope="col">手机号码</th>
											<th scope="col">E-mail</th>
											<th scope="col">传真</th>
											<th scope="col">操作</th>
										</tr>
									</thead>
									<tbody>
									
									<#list (addresslist.content) as address>
										<tr>
											<td>
												<div onclick="select(this)" dataid="${address.id}"
													class="icheckbox icheckbox_flat-green" aria-checked=false
													style="position: relative;">
													<input type="checkbox"
														style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
													<ins class="iCheck-helper"
														style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>
												</div>
											</td>
											<td>
											<span><div style="width:36px;height:36px;overflow: hidden;border-radius: 50%;">
											<#if address.photo??>
												<img src="/file/image/${address.photo}"  style="width:36px;height:36px"/>
											<#else>	
												<img style="width:36px;height:36px"/>
											</#if>
											</div></span>
											</td>
											
											<td><span>${address.username}</span></td>
											<td><a href="javascript:void(0)"><span>
											<#if address.sex=1>
												<i class="iconfont icon-boy" style="color: #00c0ef;"></i>
												<#else>
												<i class="iconfont icon-girl" style="color: #e14040;"></i>
											</#if>
											</span>
											</a></td>
											<td>
												<div style="text-overflow: ellipsis; white-space: nowrap; width: 100px; overflow: hidden; margin: 0 auto;">
													${address.tel}</div>
											</td>
											<td>
											<span>${address.email}</span>
											</td>
											<td>
												<span>${address.fax}</span>
											</td>
											<td><a class="btn btn-look " addressid="${address.id}"><i class="iconfont icon-search"></i><span>
														查看</span></a> <a path="${href!''}" class="btn btn-delete "addressid="${address.id}"> <i
													class="iconfont icon-trash"> </i> <span>删除</span>
											</a> <a class="btn btn-update" addressid="${address.id}">
												 <i class="iconfont icon-brush"></i><span>编辑</span> </a></td>
										</tr>
										</#list>
										
									</tbody>
								</table>
									<@page.page url=requestURI pager=addresslist />
									<#else>
									<table class="table table-hover table-striped" cellspacing="0"
									border="0"
									style="border-width: 0px; border-collapse: collapse;">
									<thead>
										<tr>
											<th scope="col">选择</th>
											<th scope="col"></th>
											<th scope="col">联系人</th>
											<th scope="col">性别</th>
											<th scope="col">手机号码</th>
											<th scope="col">分享人</th>
											<th scope="col">分享时间</th>
											<th scope="col">操作</th>
										</tr>
									</thead>
									<tbody>
									<#if shareaddresslist??>
									<#list (shareaddresslist.content) as address>
										<tr>
											<td>
												<div onclick="select(this)" dataid="${address.id}"
													class="icheckbox icheckbox_flat-green" aria-checked=false
													style="position: relative;">
													<input type="checkbox"
														style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
													<ins class="iCheck-helper"
														style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>
												</div>
											</td>
											<td>
											<span><div style="width:36px;height:36px;overflow: hidden;border-radius: 50%;">
											<#if address.photo??>
												<img src="/file/image/${address.photo}"  style="width:36px;height:36px"/>
											<#else>	
												<img style="width:36px;height:36px"/>
											</#if>
											</div></span>
											</td>
											
											<td><span>${address.username}</span></td>
											<td><a href="javascript:void(0)"><span>
											<#if address.sex=1>
												<i class="iconfont icon-boy" style="color: #00c0ef;"></i>
												<#else>
												<i class="iconfont icon-girl" style="color: #e14040;"></i>
											</#if>
											</span>
											</a></td>
											<td>
												<div style="text-overflow: ellipsis; white-space: nowrap; width: 100px; overflow: hidden; margin: 0 auto;">
													${address.tel}</div>
											</td>
											<td>
												<span>${address.user.realName}</span>
											</td>
											<td>
												<span>${address.createtime}</span>
											</td>
											<td><a class="btn btn-look " addressid="${address.id}"><i class="iconfont icon-search"></i><span>
														查看</span></a>
												<a path="${href!''}" class="btn btn-delete "addressid="${address.id}"> <i
													class="iconfont icon-trash"> </i> <span>删除</span>
											</a>
										</tr>
										</#list>
										</#if>
									</tbody>
								</table>
								<#if shareaddresslist??>
									<@page.page url=requestURI pager=shareaddresslist />
								</#if>	
								</#if>
							</div>
						</div>
						<!-- 右部div盒子开始 -->
					</div>
					<!-- 中部content内容 div结束 -->
				</div>

				<!-- 中部content div结束-->
			</div>
			<!-- body大盒子div结束 -->
		</div>
	</div>
</body>
</html>